<template>
  <div style="padding:0 20px;">
    <div v-if="!isView">
      <el-button type="primary" @click="openStorage">关联库位</el-button>
      <el-button type="danger" @click="deleteSel">删除所选</el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        show-overflow
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        height="445px"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" width="80"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="name" title="库位编码"></vxe-column>
      <vxe-column field="name" title="库位位置"></vxe-column>
      <vxe-column field="name" title="货架号"></vxe-column>
      <vxe-column field="name" title="仓库"></vxe-column>
      <vxe-column field="name" title="库区"></vxe-column>
      <vxe-column fixed="right" title="操作" v-if="!isView">
        <template #default="{row}">
          <el-button type="text" style="color:red" @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <SelStorage :isShowStorage="isShowStorage" v-if="isShowStorage" :filterData="tableList"
                @cancelStorage="cancelStorage"></SelStorage>
    <div class="dFooter">
        <span class="dialog-footer">
          <el-button type="primary" v-if="!isView" @click="clickNext"> 下一步 </el-button>
          <el-button @click="handleClose">关闭</el-button>
        </span>
    </div>
  </div>
</template>

<script setup>
import SelStorage from "@/views/commodity/commodityManagement/component/selStorage.vue";
import {getCurrentInstance, onMounted} from "vue";

const {proxy} = getCurrentInstance();
const props = defineProps({
  detailData: {type: Object},
  isView:{type:Boolean}
})
let tableList = ref([])
let isShowStorage = ref(false)
onMounted(()=>{
  if(JSON.stringify(props.detailData) !='{}'){
    tableList.value =props.detailData.locationDetails
  }

})
function openStorage() {
  isShowStorage.value = true
}

function cancelStorage(data) {
  isShowStorage.value = false
  if (data) {
    data =data.map(item=>{
      item.locationId =item.id
      item.id='' //新增时 置空ID
      return item
    })
    tableList.value = [...tableList.value, ...data]

  }
}

const emits = defineEmits(['cancel', 'setStorageSet'])

function handleClose() {
  emits('cancel')
}

function clickNext() {
  if (tableList.value.length > 0) {
    emits('setStorageSet', tableList.value)
  } else {
    proxy.$modal.msgWarning("请先关联库位!")
  }
}

function getData() {
  return tableList.value
}

//单个删除
function handleDelete(row) {
  tableList.value = tableList.value.filter(item => item.id != row.id)
}

//删除所选
function deleteSel() {
  let selRows = proxy.$refs.tableRef.getCheckboxRecords()
  let a = tableList.value
  let filtered = a.filter(obj => !selRows.some(bObj => bObj.id === obj.id));
  tableList.value = filtered
}

defineExpose({
  getData
})

</script>

<style scoped lang="scss">
.dFooter {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: right;
}
</style>